<!DOCTYPE html>
<!-- saved from url=(0029)http://www.mutationmedia.net/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="keywords" content="HTML, CSS, JavaScript, creative, business, template, one page, Multi pages, retina ready, high resolution, coming soon,  responsive one page template, Multipurpose">
<meta name="author" content="Benaissa Ghrib">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Mutation Media</title>

<!--Stylesheet-->

<!--[if IE 7]>
<link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->
<link href="http://www.mutationmedia.net/font.css" rel="stylesheet" type="text/css">
<link href="http://www.mutationmedia.net/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="http://www.mutationmedia.net/favicon.ico" type="image/x-icon">







<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->



<style>



/*reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p,a, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr,iframe {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
	text-decoration:none;
	list-style:none;
	
}

a,a:active,a:hover {outline: none;}
img{max-width:100%;}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}


body{
	padding:0;
	margin:0;
	font-family: 'Roboto', sans-serif;
	
	
}

img {
    margin-top: 60px;
    max-width: 100%;
    position:relative;
	max-height: 100%;

    
}

#awrapper{
	width:100%;
	
}

#sideLeft, #sideRight{
	
	float:left;
	width:50%;
	text-align:center;
	height:100%;
	height:100%;
	position:fixed;

}




#sideLeft{background:#ee4037;color:#ffffff;left:0;top:0; }
#sideRight{background:#ffffff;color:#444444;right:0; top :0; }


a{
	text-decoration:none;
	outline: none;
	
}


.content{
	margin-top:30%;
}

.content img{
	width:12%;
	float:left;
	margin-left:22%;
	
}


.content h1 {
    border-left: 1px solid #FFFFFF;
    display: inline-block;
    float: left;
    font-family: 'robotothin';
    font-size: 20px;
    margin-left: 22px;
    margin-top: 92px;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-top: 5px;
    text-transform: uppercase;
}

.content h1 span {
	font-family: 'robotomedium';
}

nav{
	position:relative;
	margin-top:60px;
}

nav ul{
	margin-bottom:10px;
	position:absolute;
	right:-22px;
}

nav li{
	list-style:none;
	margin-right:16px;
	margin-bottom:10px;
	display:block;
	font-size:14px;
	font-family: 'robotomedium';
	text-align:right;
	color:#f7a49f;
	
}

nav i{
	padding-left:10px;
	color:#ffffff;
	font-size:10px;
}

nav li a{
	color:#ffffff;
}


nav li a:hover{
	color:#f7a49f;
}

a {
	-webkit-transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}



.socials{
	margin-top:40%;
	text-align:right;
	margin-right:20px;
}

.socials li{
	display:inline-block;
	font-size:25px;
	margin-right:-10px;
}



.socials a{
	color:#f7a49f;
	display:inline-block;
}

.socials a:hover{
	color:#ffffff;
}

.holder{
	position:relative;
}

.holder i.arrow {
    font-size: 10px;
    position: absolute;
    right: -6px;
    top: 10px;
}


.feed .tweet_list{height:200px;line-height:26px;font-family: 'robotoregular';color: #999999;text-align:center;margin-bottom:20px}
.feed .tweet_list li{margin-bottom:20px; font-size: 15px;}
.feed .tweet_list a{color:#666666;font-family: 'robotoregular';}
.feed  .tweet_list p{color:#00B686;font-size:12px !important;}



#twitter{
	margin-top:45%;
	padding-right:40px;
	padding-left:40px;
}


#sideRight p.copy {
    bottom: -61px;
    color: #999999;
    font-size: 12px;
    left: -249px;
    position: relative;
    display:inline-block;
}

/* Clear float style*/
.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
}

.clearfix:after{
	clear:both;
}
/*End clear float style */





/*iPad lanscape*/
@media screen and (max-device-width: 960px){
#sideRight p.copy {bottom: 2px;left: -145px;}
.content img{width:15%;margin-left:15%;}
.content h1 {font-family: 'robotolight';}


}

/* Tablet Portrait size -> standard 960 */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#sideRight p.copy {bottom: -24px;left: -88px;}
.content img{width:15%; margin-left:5%;}
.content h1{margin-top:77px;padding-left:15px;margin-left:10px;}
.socials{margin-top:60%;}
nav li{margin-right:11px;}
.content h1 {font-family: 'robotolight';}

}

/* Mobile Landscape Size -> Tablet Portrait size*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
#sideLeft, #sideRight{width:100%;position:relative;padding-bottom:20px;}
.content img{width:15%;}
nav ul{right:0;}
.holder i.arrow{display:none;}
#sideRight p.copy{position:static;left:0;}
.content{margin-top:20%;}



}

/* Mobile Portrait Size -> Mobile Landscape Size */
@media only screen and (max-width:479px) {
#sideLeft, #sideRight{width:100%;position:relative;padding-bottom:20px;}
.content img{width:30%;float:none;margin-left:0;}
.content h1 {
    border-left: none;
    display: inline-block;
    float: none;
    margin-left: 0px;
    padding-left: 0px;
    margin-top:30px;

}
nav ul{right:0;}
.holder i.arrow{display:none;}
#sideRight p.copy{position:static;left:0;}
.socials{margin-top:80%;}
}


.icon-ok:before {
content: '\e80d';
position: relative;
color: #ee4037;
font-size: 50px;
top: -35px;
left: -8px;
}
</style>



<!--[if lt IE 8]>
<style>
/* For IE < 8 (trigger hasLayout) */
.clearfix {
    zoom:1;
}
</style>
<![endif]-->



</head><body style="">
	

<!--awrapper-->
<div id="awrapper" class="clearfix">
	
<div id="sideLeft">
	
<div class="content clearfix">
	<img src="http://www.mutationmedia.net/logo_2.png" alt="">
	<h1>we <span>design</span> with <span>passion</span></h1>
</div>
<nav>
<ul>
<li><a href="#" target="_blank">المواضيع الاخيرة</a><i class="icon-left-dir"></i></li>
<li><a href="#" target="_blank">بروفايلي</a><i class="icon-left-dir"></i></li>
<li><a href="#">اتصل بي</a><i class="icon-left-dir"></i></li>

</ul>
</nav>


<div class="holder">
	<i class="icon-left-dir arrow"></i>
<ul class="socials">
	
	
	
	<li><a href="#" target="_blank"><i class="icon-facebook-circled"></i></a></li>
	<li><a href="#" target="_blank"><i class="icon-twitter-circled"></i></a></li>
	<li><a href="#" target="_blank"><i class="icon-linkedin-circled"></i></a></li>
	
	
</ul>
</div>





</div>



<div id="sideRight">
	<!--Twitter-->
	<div id="twitter">
		<div class="feed">
			<div class="icon-ok"><ul class="tweet_list"><li class="tweet_first tweet_odd"><span class="tweet-date"><a href="#" title="view tweet on twitter">about 22 days ago</a></span> <span class="tweet">Check out this great <a href="http://search.twitter.com/search?q=&tag=Ahmed&lang=all" class="tweet_hashtag">Ahmed</a> item 'Confidence Multipurpose Retina Ready Template' <a href="#">confidenc…</a></span></li></ul></div>
		</div>	
	</div>
	<!--End twitter-->
	<p class="copy">copyright © 2013. all rights reserved.</p>
</div>

</div>
<!--End awrapper-->



<!-- Google analytics -->


	
<!-- End google analytics -->

 
</body></html>